﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Demo</title>
<meta name="content-type" content="text/html; charset=utf-8">
<script src="../../lib/tool.js"></script>
<script src="../../lib/devtool.js"></script>
<style>
#menuContainer{}
.menu_container{
	background-color:#BFDBFF;
	height:28px;
}
.base_item {
	cursor:pointer;
	float:left;
	padding:2px 8px;
}
.child_container{

	background-color:#F6F6F6;
	border:solid 1px #6593CF;
	margin-top:-22px;
	margin-left:154px;
	position:absolute;
	width:180px;
}
.menu_div{
	margin-left:-154px;
	margin-top:22px;
	position:absolute;
}	
.child_item{
	border:solid 1px #c0c0c0;
	margin:2px;
	padding-left:24px;
	zoom:1;/*必须的*/
}
.mouse_over{
	background-color:#FFE7A2;
}
.路人甲{
	background-color:#Fcc;
	height:200px;
}
</style>
</head>

<body>
	<div id="menuContainer">
		
	</div>
	<div class="路人甲"><br/><br/><br/><br/><br/>路人~<br/>路人~sss<br/><br/><br/><br/>
		<input type="button" onclick="test()" value="go" />
	</div>
</body>
<script>

var Json=[
	{ name:"File",child:[
		{ name:"File1",child:[
			{ name:"File1_1",child:[
				{ name:"File1_1_1"},{ name:"File1_1_2"},{ name:"File1_1_3"}
			]},{ name:"File1_2",child:[
		
			]},{ name:"File1_3",child:[
		
			]}
		]},
		{ name:"File2",child:[
			{ name:"File2_1",child:[
				{ name:"File2_1_1"},{ name:"File2_1_2"},{ name:"File2_1_3"}
			]},{ name:"File2_2",child:[
		
			]},{ name:"File2_3",child:[
		
			]}
		]},
		{ name:"File3",child:[
			{ name:"File3_1",child:[
		
			]},{ name:"File3_2",child:[
		
			]},{ name:"File3_3",child:[
		
			]}
		]}
	]},
	{ name:"Edit",child:[
		{ name:"Edit1",child:[
			{ name:"Edit1_1",child:[
		
			]},{ name:"Edit1_2",child:[
		
			]},{ name:"Edit1_3",child:[
		
			]}
		]},
		{ name:"Edit2",child:[
			{ name:"Edit2_1",child:[
		
			]},{ name:"Edit2_2",child:[
		
			]},{ name:"Edit2_3",child:[
		
			]}
		]},
		{ name:"Edit3",child:[
			{ name:"Edit3_1",child:[
		
			]},{ name:"Edit3_2",child:[
		
			]},{ name:"Edit3_3",child:[
		
			]}
		]}
	]}
];
/*==========================================================*
	Interface
	Dependent Functions: contains(a,b)

-*----------------------------------------------------------*/
/* tiny library */
var addClass=function(elem,cname){
		elem.className=elem.className?(elem.className+" "+cname):cname;
		return elem;
	};
var removeClass=function(elem,cname){
		if(cname===undefined){
			elem.className="";
			
		}else{
			elem.className=elem.className.replace(new RegExp("\\s?"+cname+"\\b"),"");
		}
		return elem;
	};

var box=document.getElementById("menuContainer");

var Div=function(A){
	var div=document.createElement("div");
	for(var k in A){
		if(typeof div[k] == "undefined"){
			div.setAttribute(k,A[k]);
		}else{
			div[k]=A[k];
		}	
	}
	return div;
};

var buildMenu=function(json){
	var mCont=new Div({
		className:"menu_container"
	});
	box.appendChild(mCont);
	for(var i=0,len=json.length;i<len;i++){
		var menuItem=json[i];

		var baseItem=new Div({
			className:"base_item",
			innerHTML:menuItem.name+"<br/>",
			level:0
		});

		var menuDiv=new Div({
			className:"menu_div"
		});

		mCont.appendChild(baseItem);
		baseItem.appendChild(menuDiv);

		createChild(menuItem.child,menuDiv);
	}
	regEvent();
};
var createChild=function(children,container,level){

	if(children&&children.length){
		
		if(typeof level == "undefined"){
			var level=1;//记录当前层级，从0开始
		}else{
			level++;
		}
		var childContainer=new Div({
				className:"child_container"
			});
			childContainer.style.display="none";
		var fragment=document.createDocumentFragment();
		container.appendChild(childContainer);
		for(var i=0,len=children.length;i<len;i++){
			
			var childItem=new Div({
				className:"child_item",
				innerHTML:children[i].name+'<br/>',
				level:level
			});
			
			fragment.appendChild(childItem);
			createChild(children[i].child,childItem,level);
		}
		childContainer.appendChild(fragment);
		
	}	
};
var currentSelect=[];//当前选择的项，主要操作当前选中样式
var addCurrentSelect=function(item){

	var fromIndex=item.getAttribute("level");
	clearCurrentSelect(fromIndex);
	currentSelect.push(item);
	addClass(item,"mouse_over");
};
var clearCurrentSelect=function(fromIndex){
	var fromIndex=fromIndex?fromIndex:0;
	for(var i=currentSelect.length-1;i>=fromIndex;i--){
		removeClass(currentSelect[i],"mouse_over");
		currentSelect.length--;
	}
};
var showing=[];//当前显示的子菜单
var hideShowing=function(fromIndex){//从第几级开始隐藏

	var fromIndex=fromIndex?fromIndex:0;
	for(var i=showing.length-1;i>=fromIndex;i--){
		showing[i].style.display="none";
		showing.length--;
	}

};
var showChildMenu=function(item){

	var children=item.getElementsByTagName("div");
	var child=null;
	for(var i=0;i<children.length;i++){
		if(/\bchild_container\b/.test(children[i].className)){
			child=children[i];
			break;
		}
	}
	addCurrentSelect(item);//记录当前选项
	hideShowing(item.getAttribute("level"));//子菜单隐藏到当前级（不含当前级）
	if(child){
		child.style.display="block";
		showing.push(child);
	}
	
};

var chooseChildMenu=function(item){
	if(!item.getElementsByTagName("div").length){//终结点
		hideShowing();
		clearCurrentSelect();
	}
};

var regEvent=function(){
	box.onmouseover=function(e){

		var e=e||window.event;
		var tar=e.target||e.srcElement;
		var from=e.fromElement||e.relatedTarget;

		if(!contains(tar, from)){//从子容器到父容器不触发
			if(/\bchild_item\b/.test(tar.className)){
				showChildMenu(tar);
			}else if(/\bchild_item\b/.test(tar.parentNode.className)){
				showChildMenu(tar.parentNode);
			}
		}
	};

	box.onclick=function(e){
		var e=e||window.event;
		var tar=e.target||e.srcElement;
		if(/\bbase_item\b/.test(tar.className)){
			showChildMenu(tar);
		}else if(/\bchild_item\b/.test(tar.className)){
			chooseChildMenu(tar);
		}else if(/\bchild_item\b/.test(tar.parentNode.className)){
			chooseChildMenu(tar.parentNode);
		}
	};
}
//buildMenu(Json);
function test(){
	buildMenu(Json);
}

</script>
</html>
